<template>
  <view class="fixedFooter">
    <u-button :text="btnText" @click="btnFun" :custom-style="btnStyle" :throttleTime="2000" />
    <view v-if="hasBottom" class="hasBottom">
      <text class="cGY2 f12 h20 l20">{{ lb1 }}</text>
      <text class="cYE f12 h20 l20" @click="jumpToPage('/pages/global/protocol4')">{{ lb2 }}</text>
      <text class="cGY2 f12 h20 l20">{{ lb3 }}</text>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    btnText: {
      type: String,
      default: '确认提交'
    },
    url: {
      type: String,
      default: ''
    },
    hasBottom: {
      type: Boolean,
      default: false
    },
    lb1: {
      type: String,
      default: ''
    },
    lb2: {
      type: String,
      default: ''
    },
    lb3: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      globalData: getApp().globalData,
      safeBottomStyle: '',
      btnStyle: {
        width: '100%',
        padding: '12rem',
        height: '44rem',
        boxSizing: 'border-box',
        background: '#ff7c00',
        color: '#ffffff',
        fontSize: '16rem',
        lineHeight: '24rem',
        textAlign: 'center',
        borderRadius: '50rem'
      }
    };
  },
  methods: {
    btnFun() {
      this.$emit('btnFun');
    },
    jumpToPage(url) {
      uni.navigateTo({ url });
    }
  }
};
</script>
<style lang="scss" scoped>
.fixedFooter {
  width: 100%;
  padding: 12rem;
  box-sizing: border-box;
  box-shadow: 0px 0px 10rem 0 rgba(0, 0, 0, 0.2); /* 阴影效果 */
  .hasBottom {
    padding-top: 6rem;
    box-sizing: border-box;
    text-align: center;
  }
}
</style>
